<template>
  <div class="login-main">
    <table></table>
    <div class="login-main-box">
      <div class="title">{{title}}</div>
      <el-form :model='ruleForm' class="form-input" @keyup.enter='submitForm'>
        <el-form-item>
          <el-input v-model="ruleForm.name" placeholder="请输入账户" prefix-icon='el-icon-user-solid'></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="ruleForm.password" placeholder="请输入密码" prefix-icon='el-icon-unlock' show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="!ruleForm.name || !ruleForm.password" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs } from "vue";
import { Post } from "@/api";
import { $message } from "@/components/element";
import $router, { addRoute } from "@/router/index";
import { AxiosResponse } from "axios";
export default {
  setup() {
    const data = reactive({
      title: (window as any).title,
      ruleForm: {
        name: "",
        password: "",
      },
    });

    const submitForm = async () => {
      try {
        const login: AxiosResponse = await Post({
          url: "login",
          data: data.ruleForm,
        });
        if (data.ruleForm.name == "admin") {
          localStorage.setItem(
            "router",
            JSON.stringify([
              {
                name: "user",
                path: "/user",
                meta: { title: "会员管理", name: "会员管理" },
              },
              {
                name: "job",
                path: "/job",
                meta: { title: "兼职管理", name: "兼职管理" },
              },
              {
                name: "company",
                path: "/company",
                meta: { title: "企业管理", name: "企业管理" },
              },
              {
                name: "adv",
                path: "/adv",
                meta: { title: "广告管理", name: "广告管理" },
              },
              {
                name: "contact",
                path: "/contact",
                meta: { title: "联系方式", name: "联系方式" },
              },
              {
                name: "admin",
                path: "/admin",
                meta: { title: "用户管理", name: "用户管理" },
              },
              {
                name: "jobmanage",
                path: "/jobmanage",
                meta: { title: "渠道广告", name: "渠道广告" },
              },
            ])
          );
        } else {
          localStorage.setItem(
            "router",
            JSON.stringify([
              {
                name: "user",
                path: "/user",
                meta: { title: "会员管理", name: "会员管理" },
              },
              {
                name: "jobmanage",
                path: "/jobmanage",
                meta: { title: "渠道广告", name: "渠道广告" },
              },
              {
                name: "contact",
                path: "/contact",
                meta: { title: "联系方式", name: "联系方式" },
              },
            ])
          );
        }
        localStorage.setItem("token", login.data.token);
        localStorage.setItem("userdata", JSON.stringify(login.data));
        addRoute();
        $message("success", "登录成功");
        $router.push({ path: "/index" });
      } catch (error) {
        console.log(error.data);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    return {
      ...toRefs(data),
      submitForm,
    };
  },
};
</script>
<style lang="less" scoped>
.login-main {
  height: 100%;
  background: url("../../assets/loginBg/loginbg.svg") no-repeat;
  background-size: 100%;

  .login-main-box {
    width: 350px;
    height: 280px;
    position: relative;
    margin: 0 auto;
    top: 50%;
    margin-top: -200px;
    border-radius: 5px;
    border: 1px solid #d2dce6;
    box-shadow: 8px 7px 26px -3px #d2dce6;

    .title {
      text-align: center;
      border-bottom: 3px solid #d2dce6;
      padding: 13px 0;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 30px;
    }

    .form-input {
      width: 85%;
      margin: 0 auto;
      .el-button {
        width: 100%;
        height: 40px;
      }
    }
  }
}
</style>